<template>
	<view class="u_reply_item grey_border">

		<view class="u_reply_head">
			<!-- 头像 -->
			<u-avatar class="u_avatar" :src="data.poster.avatar" @click="gotoUserHome()"></u-avatar>
			<!-- 昵称 -->
			<view class="u_reply_info" @click="gotoUserHome()">
				<view class="u_reply_nick_box">
					<text class="u_reply_nick">{{data.poster.displayName}}</text>
				</view>
				<!-- 发布时间 -->
				<view class="u_reply_des">
					<text class="u_reply_last_time">{{data.createdDate | formatDate}}</text>
				</view>
			</view>

			<view style="display: flex;flex-direction: row;margin-top: 10px;" v-if="showLike">
				<!-- 赞 -->
				<image v-if="data.likeOrDis===1"  @click.stop="cancelLike('like')"
					class="r_like_opt_img" src="/static/icon/liked.png"></image>
				<image v-else  @click.stop="like('like')"
					class="r_like_opt_img" src="/static/icon/unlike.png"></image>

				<text class="r_like_opt_txt">{{data.likeCount}}</text>

				<!-- 踩 -->
				<image v-if="data.likeOrDis===-1" @click.stop="cancelLike('dislike')"
					class="r_like_opt_img" src="/static/icon/disliked.png"></image>
				<image v-else  @click.stop="like('dislike')"
					class="r_like_opt_img" src="/static/icon/undislike.png"></image>
			</view>
		</view>


		<!-- 评论内容 -->
		<view>
			<text-overflow v-if="data.content" :dt="data.content" class="u_reply_content"></text-overflow>

			<!-- 图片、视频 -->
			<file-list :dataList="data.fileList" @video_play="videoPlayBack"></file-list>
		</view>

		<!-- 文章信息 -->
		<view class="u_a_box" v-if="data.objectInfo" @click="gotoDetail(data.objectInfo.id)">

			 <view v-if="data.objectInfo.fileList">
				<image v-if="getFileType(data.objectInfo.fileList[0]) == 1" class="u_article_img" :src="data.objectInfo.fileList[0].url"></image>
				<video v-if="getFileType(data.objectInfo.fileList[0]) == 2" class="u_article_img"
							:controls="false" :show-fullscreen-btn="false" object-fit="cover"
							:show-center-play-btn="false"
							:src="data.objectInfo.fileList[0].url">
					<cover-view class="r_video_fixed">
						<image class="play" src="/static/icon/play.png" mode="widthFix"></image>
					</cover-view>
				</video>
			 </view>

			<view class="u_tag">原贴</view>

			<view class="u_article">
				<view class="u_article_content">{{data.objectInfo.content}}</view>
			</view>
		</view>

	</view>
</template>

<script>
	import TextOverflow from "@/components/textOverflow.vue";
	import FileList from "@/components/file/fileList.vue";
	import myAlbum from "@/components/file/myAlbum.vue";
	export default {
		name: "userReplyContent",
		props: {
			// 数据对象
			data: {
				type: Object,
				default () {
					return {
						id: '',
						createdDate: '',
						// 发帖人
						poster: {}
					}
				}
			},
			// 是否显示点赞
			showLike: {
				type: Boolean,
				default () {
					return true
				}
			},
			// 是否禁止前往主页
			disableToHome: {
				type: Boolean,
				default () {
					return true
				}
			},
		},
		components:{
			TextOverflow,
			FileList,
			myAlbum
		},
		data() {
			return {
				// 提交中
				submiting: false
			}
		},
		methods: {
			//
			getFileType(file){
				let type = -1
				let suffix = file.fileSuffix
				if (['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(suffix) !== -1){
					type = 1
				}
				if (['avi','wmv','mpeg','mp4','m4v','mov','asf','flv','f4v','rmvb','rm','3gp','vob'].indexOf(suffix) !== -1){
					type = 2
				}
				return type
			},
			hasLogin() {
				return this.$authUtil.isLoginedin()
			},
			// 视频播放
			videoPlayBack(url){
				this.$emit('video_play',url)
			},
			// 赞或踩
			like(type) {
				if(this.submiting || !this.hasLogin()){
					return
				}
				this.submiting = true
				let url = null;
				if (this.data.likeOrDis !==-1 && type === 'dislike'){
					// 踩
					url = 'user/dislike/reply/'
				} else if (this.data.likeOrDis !==1 && type === 'like'){
					// 赞
					url = 'user/like/reply/';
				}
				if (url == null){
					return false
				}
				this.$httpApi.baseLikePost(url + this.data.id, {}).then(({data}) => {
					if (data.code == "000000") {
						if (this.data.likeOrDis !==-1 && type === 'dislike'){
							this.data.likeCount = this.data.likeCount + (this.data.likeOrDis == 1?-2:-1)
							this.data.likeOrDis = -1;
						} else if (this.data.likeOrDis !==1 && type === 'like'){
							this.data.likeCount = this.data.likeCount + (this.data.likeOrDis == -1?2:1)
							this.data.likeOrDis = 1;
						}
					}
					this.submiting  = false
				}).catch(err => {
					this.submiting  = false
				})
			},
			// 取消赞或踩
			cancelLike(type) {
				if(this.submiting || !this.hasLogin()){
					return
				}
				this.submiting = true
				let url = null;
				// 取消踩
				if (this.data.likeOrDis ===-1 && type === 'dislike'){
					url = 'user/dislike/reply/';
				} else if (this.data.likeOrDis ===1 && type === 'like'){
					// 取消赞
					url = 'user/like/reply/';
				}
				if (url == null){
					return false
				}
				this.$httpApi.baseLikeDelete(url + this.data.id, {}).then(({data}) => {
					if (data.code == "000000") {
						if (this.data.likeOrDis ===-1 && type === 'dislike'){
							this.data.likeCount = this.data.likeCount + 1
						} else if (this.data.likeOrDis ===1 && type === 'like'){
							this.data.likeCount = this.data.likeCount - 1
						}
						this.data.likeOrDis = null
						this.submiting  = false
					}
				}).catch(err => {
					this.submiting  = false
				})
			},
			// 前往详情
			gotoDetail(id){
				uni.navigateTo({
					url: '/pages/article/article?id='+id
				})
			},
			// 前往用户主页
			gotoUserHome() {
				if(this.disableToHome){
					return
				}
				uni.navigateTo({
					url: '/pages/center/homePage?id='+this.data.poster.username
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.r_video_fixed {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
		z-index: 996;
	}

	.play {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 50%;
		z-index: 9;
	}
	.u_reply_item {
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		padding: 10px 25upx;
	}

	.u_reply_head {
		display: flex;
		flex: 1;
		flex-direction: row;
		margin-bottom: 10px;
	}

	.u_reply_avatar {
		margin-right: 4px;
	}

	.u_reply_info {
		margin-left: 5px;
		flex: 1;
		flex-direction: column;
	}

	.u_reply_nick_box {
		flex: 1;
		flex-direction: row;
		margin: 0 4px 0 0;
		align-items: center;
	}

	.u_reply_nick {
		font-size: 14px;
		color: #333333;
	}

	.u_reply_des {
		flex: 1;
		flex-direction: row;
		align-items: center;
	}

	.r_like_opt_img{
		width: 14px;
		height: 14px;
		margin: 0 10px;
		position: relative;
	}
	.r_like_opt_txt{
		font-size: 14px;
		line-height: 14px;
		color: #43484D;
		width: 35px;
		text-align: center;
	}

	.u_reply_last_time {
		font-size: 12px;
		color: #999999;
	}
	.u_reply_content {
		font-size: 15px;
		color: #333333;
		padding: 15px 0 10px 0;
	}
	.u_a_box{
		display: flex;
		border-radius: 5px;
		background-color: #f5f5f5;
		flex-direction: row;
		padding: 2px 5px;
	}
	.u_tag{
		background-color: #e8e8e8;
		text-align: center;
		width: 30px;
		line-height: 20px;
		height: 20px;
		font-size: 12px;
		color: #8a8a8a;
		font-weight: 600;
		border-radius: 4px;
		margin: 10px 5px;
	}
	.u_article{
		flex: 1;
		display: flex;
		flex-direction: row;
		overflow: hidden;
	}
	.u_article_content{
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		color: #43484D;
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	.u_article_img{
		width: 36px;
		height: 36px;
		border-radius: 6px;
	}


</style>
